import { useEffect } from "react";
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'


const App = () => {
  useEffect(() => {
    const scene = new THREE.Scene();

    const width = window.innerWidth;
    const height = window.innerHeight;
    const k = width / height;
    const s = 200;// 三维相机显示范围控制系数，系数越大，显示范围越大

    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(0, 0, 500);
    camera.lookAt(scene.position); // 设置相机方向，指向场景对象

    const renderer = new THREE.WebGL1Renderer();
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);

    function render() {
      renderer.render(scene, camera);//执行渲染操作
    };
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', () => {
      render();
    })// 监听鼠标，键盘事件
    // 圆形缓冲几何体
    // const geometry = new THREE.CircleGeometry(20, 20);
    // 平面缓冲几何体
    // const geometry = new THREE.PlaneGeometry(400, 200);
    // 圆环缓冲几何体
    const geometry = new THREE.RingGeometry(50, 150, 16); // 第三个参数圆环分段数，可以有不同效果，32，4，10
    const material = new THREE.MeshBasicMaterial({
      color: 0xffffff,
      side: THREE.FrontSide //显示的面 THREE.FrontSide 背面，THREE.BackSide 前面，THREE.DoubleSide 双面
    })
    // const circle = new THREE.Mesh(geometry, material);
    // const place = new THREE.Mesh(geometry, material);
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh)
    render()
  }, [])
}
export default App;